jQuery implements clicking off a specified layer outside a specified area [classic]

  • 2021-06-29 10:09:01
  • OfStack

An example of how jQuery implements clicking off a specified layer outside a specified area.Share it for your reference, as follows:

Click outside the specified area on the page to close the layer.A common effect is to click outside the pop-up layer to close it.Today, I encountered a result like this. It is very simple to implement with jQuery. I reviewed the relevant knowledge by the way.


$(document).mouseup(function(e){
  if($(e.target).parent("#big_map").length==0){
    $("#big_map").hide("fast");
  }
})

The jquery code above means that when the mouse button is released on the page, the function function is triggered.Find the set of only 1 parent elements containing all matching elements that triggered the event and determine the number of elements found.If equal to 0, it means that the specified layer is not in the specified area and is closed.

Definition and usage:

e.target: The element that triggered the click event (the DOM object) will not change, it will always be the target DOM element that directly accepts the event.
parent ([expr]): Gets a collection of only one parent element that contains all matching elements.
length: Number of elements in the jQuery object.
mouseup Event:
The mouseup event occurs when the mouse button is relaxed on an element.
Unlike the click event, the mouseup event only requires a relaxation button.Relaxing the mouse button triggers the event when the mouse pointer is over the element.
The mouseup () method triggers an mouseup event, or specifies a function to run when an mouseup event occurs.

More readers interested in jQuery-related content can view this site's topics: jQuery Extended Skills Summary, jQuery Common Plug-ins and Usages Summary, jQuery Dragging Special Effects and Skills Summary, jQuery Table (table) Operation Skills Summary, Ajax Usage Summary in jquery, jQuery Common Classic Special Effects Summary,jQuery Animation and Utility Summary and jquery Selector Usage Summary

I hope that the description in this paper will be helpful to everyone's jQuery program design.


Related articles: